import React, { PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import Spinner from 'react-native-loading-spinner-overlay'
import {connect} from 'react-redux'
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import { createAction, NavigationActions } from '../../../utils'
import screen from '../../../utils/screen'
import { WhiteSpace, Modal } from 'antd-mobile'
import { OwnCard } from '../../../widgets'

@connect(({ statistics, loading }) => ({ ...statistics, isLoading: loading.models.statistics}))
export default class extends PureComponent {

  componentDidMount() {
    const mainTime= this.props.mainTime;
    this.invokeFefchData(mainTime.startTime, mainTime.endTime)
  }

  componentWillReceiveProps(nextProps) {
    const mainTime= this.props.mainTime;
    const nextMainTime = nextProps.mainTime;
    if(nextMainTime.startTime === undefined || nextMainTime.endTime === undefined) {
      return false
    }
    if(nextMainTime.startTime !== mainTime.startTime || nextMainTime.endTime !== mainTime.endTime) {
      this.invokeFefchData(nextMainTime.startTime, nextMainTime.endTime)
    }
  }

  invokeFefchData = (sTime, eTime) => {
    console.log('fetch data with sTime: ', sTime, ' eTime: ', eTime)
    this.props.dispatch(createAction("statistics/getProblemReport")({
      startTime: sTime,
      endTime: eTime,
    }))
  }

  geneTitle = () => {
    return [
      '类目',
      '金额',
      '同比金额',
      '同比比率'
    ]
  }
  geneContent = () => {
    const { problemReportContent }  = this.props;
    return problemReportContent;
  }

  render() {
    const head = this.geneTitle()
    const content = this.geneContent()
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Spinner visible={false}/>
        <Table borderStyle={{borderWidth: 0, borderColor: '#bfbfbf' }}>
          <Row data={head} flexArr={[2,1,1,1]} style={styles.head} textStyle={styles.text}/>
          <Rows textStyle={styles.text} data={content} flexArr={[2,1,1,1]} style={styles.row}/>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: screen.pxToDp(20)
  },
  text: {
    margin: 6,
  }
})
